<template>
	<view>
		<cu-custom bgColor="bg-white"><block slot="content">首页</block></cu-custom>
		<view class="bg-white margin-bottom shadow" style="z-index: 1999;position: fixed;width: 100%;">
			<view class="cu-bar search bg-white">
				<!-- <view class="search-form radius flex justify-center" @tap="searchShop">
					<text class="cuIcon-search"></text>
					<text class="text-grey text-sm">搜索店铺名称 </text>
				</view> -->
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="inputFocus" @blur="inputBlur" :value="keyword"  @input="inputChange" @confirm="onKeywordConfirm" :adjust-position="false" type="text" placeholder="搜索店铺名称" confirm-type="search"></input>
				</view>
			</view>		
		</view>
		<!-- <view style="height:40rpx;"></view> -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" top="100" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<rankList v-if="ranklist && searchStatus" :ranklist="ranklist"></rankList>
		</mescroll-uni>	
		</view>		
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import rankList from '@/components/list/ranking-list.vue'
	import * as Main_API from '@/api/main/home.js' 
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		components:{
			rankList,
		},
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, 
					noMoreSize: 9, //设置列表的总数量要大于半页才显示无更多数据; 默认5
					empty:{
						tip: '~ 空空如也  ~', // 提示
					}
				},
				shop_id:uni.getStorageSync('shop').id,
				swiperList:[
					{
						id: 32,
						pic_url: 'http://lianjiu.oss-cn-hangzhou.aliyuncs.com/productImagesnormal/8237EF75438142198603FA09520D6598.png',
					}
				],
				params:{
					page_no:1,
					page_size:20
				},
				ranklist:[],
				keyword: '',
				searchStatus: false,
			};
		},
		onLoad() {
			// this.GET_RankList()
		},
		onShow() {
			uni.removeStorageSync('menuList')
			uni.removeStorageSync('orderStatus')
			uni.removeStorageSync('buylist')
		},
		methods:{
			searchShop(){
			},
			/*下拉刷新的回调 */
			downCallback() {
				// this.params.keyword = ''
				this.params.page_no =1
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				Main_API.getRankList(this.params).then(res =>{
					this.searchStatus = true
					this.mescroll.endSuccess(res.data.length)
					if(this.params.page_no ==1) this.ranklist = []
					this.ranklist = this.ranklist.concat(res.data)
					this.params.page_no+=1
				}).catch(()=>{
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			inputChange(e) {
			    this.keyword = e.detail.value.replace(/\s+/g,"")
				if(this.keyword.replace(/\s+/g,"")){
					this.searchStatus = false
				}else{
					this.searchStatus = true
				}
			},   
			inputFocus(e) {
				this.keyword =''
				this.searchStatus = false
				this.params.page_no = 1
				this.upCallback()
			},
			inputBlur(){
				this.searchStatus = true
			},
			onKeywordConfirm(event) {
				let keyword = event.detail.value.replace(/\s+/g,"")
				if(!keyword &&  keyword=== ''){
					uni.showToast({
						title:'请输入关键词进行搜索',
						icon:'none'
					})
					this.searchStatus = false
				}else{
					this.searchStatus = true
					this.params.keyword = event.detail.value
					this.params.page_no =1
					Main_API.getRankList(this.params).then(res =>{
						this.searchStatus = true
						this.mescroll.endSuccess(res.data.length)
						if(this.params.page_no ==1) this.ranklist = []
						this.ranklist = this.ranklist.concat(res.data)
						this.params.page_no+=1
					}).catch(()=>{
						this.mescroll.endErr();
					})
				}
			},
		}
	}	
</script>
